<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments::head(~{::title})">
    <title>关于我</title>
</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<body>
<!--导航 -->
<nav th:replace="_fragments::menu(6)">
</nav>
<!-- 中间内容 -->
<div class="mine-container mine-padded-tb-large">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <img th:src="@{${user.avatar}}" alt="" class="ui rounded image">
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p>简介:</p>
                    <p th:text="${user.desc}">一只技术猴</p>
                </div>
                <div class="ui attached segment">
                    <div th:each="hobby : ${user.hobby}" th:text="${hobby}" class="ui orange basic left pointing label">
                        编程
                    </div>
                    <div class="ui orange basic left pointing label">......</div>
                </div>
                <div class="ui attached segment">
                    <div th:each="skill : ${user.skill}" th:text="${skill}"
                         class="ui teal basic left pointing label mine-margin-tb-tiny">Java
                    </div>
                    <div class="ui teal basic left pointing label mine-margin-tb-tiny">......</div>
                </div>
                <div class="ui  attached segment bottom">
                    <a href="https://gitee.com/Welxk" target="_blank" class="ui circular icon button"><i
                            class="github icon"></i> </a>
                    <button class="ui  circular icon button"><i id="weixin-miao" class="weixin icon"></i></button>
                    <button class="ui circular icon button"><i id="qq-miao" class="qq  icon"></i></button>
                </div>
                <div class="ui wechat-img flowing popup hidden">
                    <div class="ui teal basic images">
                        <img src="../static/image/gzh.jpg" th:src="@{/image/gzh.jpg}" alt=""
                             class="ui rounded bordered image" style="width:100px">
                    </div>
                </div>
                <div class="ui qq-img flowing popup hidden">
                    <div class="ui teal basic images">
                        <img src="../static/image/gzh.jpg" th:src="@{/image/gzh.jpg}" alt=""
                             class="ui rounded bordered image" style="width:100px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer th:replace="_fragments::footer">
</footer>
<script>
    $('#weixin-miao').popup({
        popup: $('.wechat-img'),
        on: 'hover',
        position: 'top center'
    });
    $('#qq-miao').popup({
        popup: $('.qq-img'),
        on: 'hover',
        position: 'top center'
    });
</script>
</body>
</html>